<template>
	<view class="container top">
		<!-- 订单信息 -->
		<view class="section">
			<view class="section-title">订单信息</view>
			<view class="info-item">
				<text class="label">订单号：</text>
				<text class="value">121212112487878</text>
				<text class="status">已完成</text>
			</view>
			<view class="info-item">
				<text class="label">服务项目：</text>
				<text class="value">车辆保养</text>
			</view>
			<view class="info-item">
				<text class="label">下单时间：</text>
				<text class="value">2020.01.08. 17:40</text>
			</view>
			<view class="info-item">
				<text class="label">预约时间：</text>
				<text class="value">2020.01.08. 17:40</text>
			</view>
			<view class="info-item">
				<text class="label">车牌：</text>
				<text class="value">奔驰FWE4/粤A98HHJ</text>
			</view>
			<view class="info-item">
				<text class="label">备注：</text>
				<text class="value">-</text>
			</view>
		</view>

		<!-- 订单详情 -->
		<view class="section">
			<view class="section-title">订单详情</view>
			<view class="service-item">
				<text class="service-name">车辆保养</text>
				<text class="service-price">¥ 199</text>
			</view>
			<view class="service-item">
				<text class="service-name">车辆附加费用</text>
				<text class="service-price">¥ 199</text>
			</view>
		</view>

		<!-- 价格明细 -->
		<view class="section price-section">
			<view class="price-item">
				<text>原价</text>
				<text class="price">¥ 100</text>
			</view>
			<view class="price-item discount">
				<text>优惠</text>
				<text class="price">- ¥ 10</text>
			</view>
			<view class="divider"></view>
			<view class="price-item total">
				<text>支付金额</text>
				<text class="price">¥ 200</text>
			</view>
		</view>

		<!-- 评价结果 -->
		<view class="section">
			<view class="section-title">评价结果</view>
			<view class="review-item">
				<text class="review-label">评价时间：</text>
				<text class="review-value">2022-10-10 11:09</text>
			</view>
			<view class="review-stars">
				<text class="review-label">评价结果：</text>
				<view class="star-container">
					<text v-for="index in 5" :key="index" class="star" :class="{ 'star-active': index <= 3 }">★</text>
				</view>
			</view>
			<view class="review-content">
				<text class="review-text">评语：评语评语评语评语评语评语评语评语评语评语</text>
			</view>
		</view>
	</view>
</template>

<script setup>
</script>

<style>
.container {
	min-height: 100vh;
	background-color: #f5f5f5;
	padding: 20rpx;
}

.section {
	background-color: #ffffff;
	border-radius: 12rpx;
	padding: 30rpx;
	margin-bottom: 20rpx;
	width: 650rpx;
	margin-left: -13rpx;
}

.section-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 20rpx;
}

.info-item {
	display: flex;
	align-items: flex-start;
	margin-bottom: 16rpx;
	font-size: 28rpx;
	line-height: 40rpx;
}

.label {
	color: #666;
	min-width: 140rpx;
}

.value {
	color: #333;
	flex: 1;
}

.status {
	color: #ff4d4f;
	font-size: 26rpx;
}

.service-item {
	display: flex;
	justify-content: space-between;
	margin-bottom: 16rpx;
	font-size: 28rpx;
}

.service-name {
	color: #333;
}

.service-price {
	color: #333;
	font-weight: 500;
}

.price-section {
	padding-bottom: 20rpx;
}

.price-item {
	display: flex;
	justify-content: space-between;
	margin-bottom: 16rpx;
	font-size: 28rpx;
	color: #666;
}

.price {
	color: #333;
}

.discount .price {
	color: #ff4d4f;
}

.total {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
}

.divider {
	height: 1rpx;
	background-color: #eee;
	margin: 20rpx 0;
}

.review-item {
	margin-bottom: 16rpx;
	font-size: 28rpx;
}

.review-label {
	color: #666;
	margin-right: 20rpx;
}

.review-value {
	color: #333;
}

.review-stars {
	display: flex;
	align-items: center;
	margin-bottom: 16rpx;
}

.star-container {
	display: inline-block;
}

.star {
	font-size: 32rpx;
	color: #ddd;
	margin-right: 10rpx;
}

.star-active {
	color: #ffd700;
}

.review-content {
	margin-top: 20rpx;
	font-size: 28rpx;
	color: #666;
	line-height: 1.5;
}

.review-text {
	word-break: break-all;
}
.top {
		width: 100%;
		height: 400rpx;
		background-image: url(/static/xiao@3x.png);
		background-repeat: no-repeat;
		background-size: 100%;
	}
</style> 